LBY.LINK

async / await

随心ii而动 阅读(2199)    (0)

首先 async / await 并不是es6新增的，而是ES7（ECMAScript 2016）推出了Async函数（async/await），实现了以顺序、同步代码的编写方式来控制异步流程，彻底解决了回调地狱问题。

今天先了解一下Promise语法糖

语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。
    //以往定义Promise
    new Promise(resolve => {
      console.log('张三');
      resolve('李四');
    }).then(v => console.log(v));

需要注意Async函数需要在function前面添加async关键字，同时内部以await关键字来阻塞异步操作

    async function hhh() {}
    console.log(hhh());
   async function hhh() {
      return "李四";
    }
    hhh().then(v => console.log(v));

newPromise

    async function hhh() {
      return new Promise(resolve => {
        console.log('张三');
        resolve('李四');
      })
    }
    hhh().then(v => console.log(v));

setTimeout

    async function hhh() {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log('张三');
          resolve('李四');
        }, 2000)
      })
    }
    hhh().then(v => console.log(v));

.then

    new Promise(resolve => {
        resolve();
      })
      .then(v => {
        return "张三";
      })
      .then(v => {
        console.log(v);
      });

await返回Promise

    async function hhh() {
      let name = await new Promise(resolve => {
        setTimeout(() => {
           resolve("张三");
        }, 2000);
      });
      console.log(name);
    }

    hhh();

dd20ca21f4155ecebd551a0803add38.png